{% from 'bootstrap5/nav.html' import render_nav_item %}
{% from 'bootstrap5/utils.html' import render_icon, render_messages %}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {% block head %}
  <title>{% block title %}{% endblock %} - Moments</title>
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
  {% block styles %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  {% endblock styles %}
  {% endblock head %}
</head>

<body>
  {% block navbar %}
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="{{ url_for('main.index') }}">
        <img src="{{ url_for('static', filename='favicon.ico') }}" alt="Moments">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
        aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <div class="navbar-nav me-auto">
          {{ render_nav_item('main.index', 'Home') }}
          {{ render_nav_item('main.explore', 'Explore') }}
          <form class="d-flex" role="search" action="{{ url_for('main.search') }}">
            <input class="form-control me-2" name="q" type="search" placeholder="Photo, tag or user" aria-label="Search" required>
            <button class="btn btn-light my-2 my-sm-0" type="submit">
              {{ render_icon('search') }}
            </button>
          </form>
        </div>
        <div class="navbar-nav ms-auto">
          {% if current_user.is_authenticated %}
          <a class="nav-item nav-link" href="{{ url_for('main.show_notifications', filter='unread') }}">
            <span class="position-relative">
              {{ render_icon('bell-fill') }}
              <span
                id="notification-badge"
                class="{% if notification_count == 0 %}hide{% endif %} position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                data-href="{{ url_for('ajax.notifications_count') }}"
              >
                {{ notification_count }}
                <span class="visually-hidden">unread messages</span>
              </span>
            </span>
          </a>
          <a class="nav-item nav-link" href="{{ url_for('main.upload') }}" title="Upload">
            {{ render_icon('plus-circle-fill') }}
          </a>
          <div class="dropdown nav-item">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">
              <img class="avatar-xs" src="{{ url_for('main.get_avatar', filename=current_user.avatar_s) }}">
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" role="menu">
              <h6 class="dropdown-header">Logged in as {{ current_user.username }}</h6>
              <li>
                <a class="dropdown-item" href="{{ url_for('user.index', username=current_user.username) }}">
                {{ render_icon('person-fill') }} My Home
                </a>
              </li>
              <div class="dropdown-divider"></div>
              <li>
                <a class="dropdown-item" href="{{ url_for('user.edit_profile') }}">
                {{ render_icon('gear-fill') }} Settings
                </a>
              </li>
              {% if current_user.can('MODERATE') %}
              <li>
                <a class="dropdown-item" href="{{ url_for('admin.index') }}">
                {{ render_icon('speedometer') }} Dashboard
                </a>
              </li>
              {% endif %}
              <li>
                <a class="dropdown-item" href="{{ url_for('auth.logout') }}">
                {{ render_icon('power') }} Logout
                </a>
              </li>
            </div>
          </div>
          {% else %}
          <a class="btn btn-outline-primary" href="{{ url_for('auth.login') }}">Login</a>&nbsp;&nbsp;
          <a class="btn btn-primary" href="{{ url_for('auth.register') }}">Join Moments</a>
          {% endif %}
        </div>
      </div>
    </div>
  </nav>
  {% endblock %}

  <main>
    <div class="container">
      {{ render_messages(dismissible=True, dismiss_animate=True) }}
      {% block content %}{% endblock %}
      {% block footer %}
      <footer>
        <p class="float-start">
          <small>&copy; 2024 Moments -
            <a href="https://greyli.com" title="Written by Grey Li">Grey Li</a> -
            <a href="https://github.com/greyli/moments" title="Fork me on GitHub">GitHub</a> -
            <a href="https://helloflask.com" title="A HelloFlask project">HelloFlask</a>
          </small>
        </p>
        <p class="float-end">
          <small>Capture and share every wonderful moment.</small>
        </p>
      </footer>
      {% endblock %}
    </div>
  </main>
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="mainToast" class="toast align-items-center border-0 text-bg-secondary" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body text-white"></div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>

  {% block scripts %}
  <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/dayjs/dayjs.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/dayjs/plugin/relativeTime.js') }}"></script>
  <script src="{{ url_for('static', filename='js/dayjs/plugin/utc.js') }}"></script>
  <script src="{{ url_for('static', filename='js/dayjs/plugin/localizedFormat.js') }}"></script>
  <script src="{{ url_for('static', filename='js/main.js') }}"></script>
  <script type="text/javascript">
    const csrfToken = "{{ csrf_token() }}";
    const isAuthenticated = {{ current_user.is_authenticated|tojson }};
  </script>
  {% endblock %}
</body>

</html>
